<template>
  <div>
    <div class="w-100 p-3 border-bottom">课程设置</div>
    <div class="hb_changepwd m-auto mt-5">
      <div class="demo-input-suffix">
        <!-- 课程选择 -->
        <div class="p-3">
          <p style="text-align: left; margin: 0 0 20px">选择你的课程</p>
          <div style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="value"
              filterable
              :left-default-checked="[]"
              :right-default-checked="[]"
              :render-content="renderFunc"
              :titles="['选择课程', '已选课程']"
              :button-texts="['', '']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }"
              @change="handleChange"
              :data="data"
            >
            </el-transfer>
          </div>
        </div>
        <!-- 辅导方式 -->
        <div class="p-3 text-center">
          <span>辅导方式</span>
          <el-checkbox-group v-model="checkWay">
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-checkbox-group>
        </div>
        <!-- 所在地区 -->
        <div class="p-3"></div>
        <span
          class="
            d-block
            bg-info
            w-25
            m-auto
            mt-4
            fs-4
            text-center
            rounded-3
            text-white
          "
          >确定</span
        >
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ["线上辅导", "线下辅导", "大学生家教"];
export default {
  data() {
    const generateData = (_) => {
      const data = [];
      const kc = ["语文", "数学", "英语", "物理", "化学"];
      for (let i = 0; i <= kc.length - 1; i++) {
        data.push({
          key: i + 1,
          label: `${kc[i]}`,
        });
      }
      return data;
    };
    return {
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,
      checked: true,
      checkWay: "",
      data: generateData(),
      value: [],
      value4: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.hb_changepwd {
  width: 75% !important;
}
</style>